<template>
    <div class="aticle">
        <div class="a-header">
            <div class="h-left">
                <i class="iconfont icon-back"></i>
            </div>
            <div class="h-mid">
                <div class="m-title">
                    <span>文章详情页</span>
                </div>
            </div>
            <div class="h-right">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <div class="a-content">
            <div class="c-author">
                <div class="a-left">
                    <div class="l-avatar">
                        <img :src="info.user.avatar | avatar" alt />
                    </div>
                    <div class="l-name">
                        <span>{{info.user.nickname}}</span>
                        <p>{{info.user.what_is_up}}</p>
                    </div>
                </div>
                <div class="a-right">
                    <div class="r-focus">
                        <i class="iconfont icon-add"></i>
                        <span>关注</span>
                    </div>
                </div>
            </div>
            <div class="c-title">
                <h1>{{info.article.title}}</h1>
            </div>
            <div class="c-article">
                <md-preview :md="info.article.text"></md-preview>
            </div>
        </div>
    </div>
</template>

<script>
import apiPage from '@/api/page'
import mdPreview from '@/components/md-preview'
export default {
    data() {
        return {
            info: {
                article: {},
                mostViewArticles: [],
                promotes: [],
                user: {}
            }
        }
    },
    components: {
        mdPreview
    },
    methods: {
        async getArticle() {
            const res = await apiPage.article({ id: this.$route.params.id })
            if (res.done) {
                this.info = res.data
            }
        }
    },
    mounted() {
        this.getArticle()
    }
}
</script>


<style lang="less">
.aticle {
    .a-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 115px;
        padding: 0 39px;
        background: white;
        box-shadow: 0 0 10px 0 rgba(2, 2, 2, 0.2);
        z-index: 1000;
        .h-left {
            flex-flow: 0;
            i{
                font-weight: 700;
            }
        }
        .h-mid {
            display: flex;
            justify-content: space-between;
            flex: 1;
            padding: 0 30px 0 50px;
            span{
                font-size: 34px;
            }
        }
        .h-right {
            flex-flow: 0;
            i{
                font-weight: 700;
            }
        }
    }
    .a-content {
        padding: 0 39px;
        margin-top: 115px;
        .c-author {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 150px;
            .a-left{
                display: flex;
                align-items: center;
                .l-avatar{
                    flex-basis: 78px;
                    height: 78px;
                    border-radius: 39px;
                    overflow: hidden;
                    img{
                        width:100%;
                        height: 100%;
                    }
                }
                .l-name{
                    padding-left: 20px;
                    span{
                        font-size: 32px;
                        font-weight: 700;
                    }
                    p{
                        color:#909090;
                    }
                }
            }
            .a-right{
                display: flex;
                align-items: center;
                .r-focus{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width:150px;
                    height: 64px;
                    box-sizing: border-box;
                    border: 1px solid #6cb;
                    color:#6cb;
                }
            }
        }
        .c-title{
            padding-bottom: 30px;
            h1{
                font-size: 38px;
            }
        }
    }
}
</style>

